import type { CSSProperties, VNodeChild } from "vue";
import type { FormItemRule, FormRules, SelectOption } from "naive-ui";
import type { RowData, StringKeys } from "@/_interface";
import type {
  CascaderOption,
  CheckboxOption,
  InputOption,
  NumberOption,
  RadioOption,
  SwitchOption,
} from "./form-item-types";

type BaseFormItem<T = RowData> = {
  label?: string;
  key: StringKeys<T>;
  value?: any;
  rules?: FormRules | FormItemRule | FormItemRule[];
  span?: number;
  hidden?: boolean;
};

type InputFormItem<T> = BaseFormItem<T> & InputOption;
type NumberFormItem<T> = BaseFormItem<T> & NumberOption & { type: "number" };
type RadioFormItem<T> = BaseFormItem<T> & RadioOption & { type: "radio" };
type CheckboxFormItem<T> = BaseFormItem<T> & CheckboxOption & { type: "checkbox" };
type SwitchFormItem<T> = BaseFormItem<T> & SwitchOption & { type: "switch" };
type SelectFormItem<T> = BaseFormItem<T> & SelectOption & { type: "select" };
type CascaderFormItem<T> = BaseFormItem<T> & CascaderOption & { type: "cascader" };

export type NaiveFormItem<T = RowData> =
  | InputFormItem<T>
  | NumberFormItem<T>
  | RadioFormItem<T>
  | CheckboxFormItem<T>
  | SwitchFormItem<T>
  | SelectFormItem<T>
  | CascaderFormItem<T>;

export type NaiveFormGroupItem<T> = {
  title?: string;
  name?: string;
  expanded?: boolean;
  disabled?: boolean;
  renderIcon?: (expand: boolean) => VNodeChild;
  renderTitle?: (expand: boolean) => VNodeChild;
  renderArrow?: (expand: boolean) => VNodeChild;
  items: NaiveFormItem<T>[];
};

export type NaiveFormOption<T = RowData> = {
  size?: "small" | "medium" | "large";
  disabled?: boolean;
  labelWidth?: string | number | "auto";
  labelAlign?: "left" | "right";
  labelPlacement?: "left" | "top";
  requireMarkPlacement?: "left" | "right" | "right-hanging";
  cols?: number;
  xGap?: number;
  yGap?: number;
  feedbackClass?: string;
  feedbackStyle?: string | CSSProperties;
  groupAccordion?: boolean;
  group?: NaiveFormGroupItem<T>[];
  items?: NaiveFormItem<T>[];
};
